<template>
  <div>
    <el-button @click="showDialog1">显示固定高度对话框</el-button>
    <el-button @click="showDialog2">显示自动高度对话框</el-button>
    <el-button @click="showDialog3">显示全屏对话框</el-button>

    <!-- 固定高度对话框 -->
    <PlutoDialog
      :visible="dialog1Visible"
      :config="dialogConfig1"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    >
      <template v-slot:content>
        <div>自定义内容区域</div>
        <!-- 您的内容 -->
      </template>
    </PlutoDialog>

    <!-- 自动高度对话框 -->
    <PlutoDialog
      :visible="dialog2Visible"
      :config="dialogConfig2"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />

    <!-- 全屏对话框 -->
    <PlutoDialog
      :visible="dialog3Visible"
      :config="dialogConfig3"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />
  </div>
</template>

<script>
import PlutoDialog from "@/components/PlutoDialog/PlutoDialog.vue";

export default {
  components: {
    PlutoDialog,
   },
  data() {
    return {
      dialog1Visible: false,
      dialog2Visible: false,
      dialog3Visible: false,

      // 固定高度配置
      dialogConfig1: {
        title: '固定高度对话框',
        width: '60%',
        contentHeight: 400, // 内容区域固定高度
        minHeight: '100vh',
        maxHeight: '100vh',
        autoHeight: false
      },

      // 自动高度配置
      dialogConfig2: {
        title: '自动高度对话框',
        width: '60%',
        autoHeight: true, // 启用自动高度
        dialogHeight: 'auto'
      },

      // 全屏配置
      dialogConfig3: {
        title: '全屏对话框',
        width: '90%',
        dialogHeight: '90vh', // 对话框整体高度
        contentHeight: null, // 内容区域自动填充
        autoHeight: true
      }
    }
  },
  methods: {
    showDialog1() {
      this.dialog1Visible = true;
    },

    showDialog2() {
      this.dialog2Visible = true;
    },

    showDialog3() {
      this.dialog3Visible = true;
    },

    handleConfirm() {
      console.log('确认操作');
      this.dialog1Visible = false;
      this.dialog2Visible = false;
      this.dialog3Visible = false;
    },

    handleCancel() {
      console.log('取消操作');
      this.dialog1Visible = false;
      this.dialog2Visible = false;
      this.dialog3Visible = false;
    }
  }
}
</script>
